<template>
    <div>
        <ul class="menu">
            <li v-for="(item,index) in $store.getters.getLeftMenu" :key="index" @click="$router.push(item.url)"
                :class="{'border':$route.path==item.url}">
                <div class="text">
                    <i class="icon iconfont" :class="item.ico"></i>
                    <div>{{item.name.slice(0,2)}}</div>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.menu {
    margin-top: 23px;

    .border {
        border-left: 4px solid rgb(6, 155, 248);
    }

    li {
        position: relative;
        padding: 0 27px;
        margin-bottom: 25px;
        cursor: pointer;

        div {
            font-size: 14px;

            div {
                margin-top: 10px;
                width: 40px;
            }

            i {
                font-size: 30px;
                color: #727e97;
            }
        }
    }
}
</style>